<template>
  <div class="mid">
    <div class="container">
      <Tyepes></Tyepes>
      <Tags></Tags>
      <Notes></Notes>
      <NumberPad></NumberPad>
      <MyNav></MyNav>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyNav from "./../components/MyNav.vue";
import Notes from "./../components/Money/Notes.vue";
import NumberPad from "./../components/Money/NumberPad.vue";
import Tyepes from "./../components/Money/Types.vue";
import Tags from "./../components/Money/Tags.vue";
// import "./../assets/style/media.less";
</script>

<style lang="less" scoped>
.mid {
  min-width: 100vw;
  // min-height: 100vh;
  // width: 100vw;
  // height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  // @media screen and (min-width: 500px) and (max-width: 800px) {
  //   .container {
  //     width: 100vw;
  //   }
  // }
  // @media screen and (min-width: 800px) and (max-width: 1000px) {
  //   .container {
  //     width: 90vw;
  //   }
  // }
  // @media screen and (min-width: 1000px) and (max-width: 1200px) {
  //   .container {
  //     width: 80vw;
  //   }
  // }
  // @media screen and (min-width: 1200px) and (max-width: 1500px) {
  //   .container {
  //     width: 70vw;
  //   }
  // }
  // @media screen and (min-width: 1500px) {
  //   .container {
  //     width: 65vw;
  //   }
  // }
  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: rgb(242, 251, 251);
    height: 100vh;
  }
}
</style>
